<template>
    <div class="topay">
        <TopDesc desc="ঋণ পরিশোধের পদ্ধতি"></TopDesc>
        <div class="topay-context">
            <div class="topay-top">{{ $store.state.orderInfo.currencyType }} {{ $store.state.orderInfo.loanAmount }}</div>
            <div class="topay-desc">আপনার পরিশোধের পদ্ধতি পছন্দ করুন</div>
            <div class="topay-info">নির্বাচন করুন</div>
            <div class="topay-btn" v-for="item in list" @click="getOrderLink">{{ item.repayMethod }}</div>
        </div>
        <ButtomDesc></ButtomDesc>
    </div>
</template>
<script>
import { getOrderhuankuanTypeAPI, getOrderhuankuanlianjieAPI } from "../../api";
import { jiami, jiemi } from "../../utils/AESKey.js";
export default {
    data() {
        return {
            list: []
        }
    },
    methods: {
        async getOrderType() {
            const f = {
                model: {
                    orderId: this.$store.state.orderId
                }
            }
            const res = await getOrderhuankuanTypeAPI(jiami(f))
            console.log(jiemi(res.data))
            this.list = jiemi(res.data).model.methods
        },
        //获取订单还款链接
        async getOrderLink() {
            const f = {
                model: {
                    orderId: this.$store.state.orderId,
                    repayMethods: '',
                    methodCode: '',
                    repayType: 'IMMEDIATE'
                }
            }
            f.model.repayMethod = this.list[0].repayMethod
            f.model.methodCode = this.list[0].methodCode
            console.log(f, '还款链接参数')
            const res = await getOrderhuankuanlianjieAPI(jiami(f))
            try {
                console.log(jiemi(res.data), '还款链接的结果')
                const herf = jiemi(res.data).model.repayCode
                setTimeout(() => {
                    window.location.href = herf;
                }, 1000);
            } catch (error) {

            }
        }
    },
    created() {
        this.getOrderType()
    }
}
</script>
<style lang="less" scoped>
.topay {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (80/@a);

    .topay-context {
        width: (330/@a);
        height: (225/@a);
        background: #FFFFFF;
        border-radius: (16/@a);
        margin-top: (10/@a);
        margin-left: (23/@a);
        padding-top: (20/@a);

        .topay-top {
            font-size: (33/@a);
            margin-left: (70/@a);
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            color: #415AB8;
        }

        .topay-desc {
            font-size: (13/@a);
            margin-top: (10/@a);
            margin-left: (22/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #1F1F1F;
        }

        .topay-info {
            margin-left: (114/@a);
            margin-top: (10/@a);
            font-size: (13/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #4D4D4D;
        }

        .topay-btn {
            margin-left: (74/@a);
            width: (180/@a);
            height: (45/@a);
            text-align: center;
            line-height: (45/@a);
            background: #415AB8;
            border-radius: (10/@a);
            font-size: (17/@a);
            margin-top: (30/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
        }
    }
}
</style>